<template>
  <div>
    <form-field label="用户名" type="text" name="name" :model="obj"></form-field>
    <form-field label="密码" type="password" name="password" :model="obj"></form-field>
    <form-field label="性别" type="radio" name="sex" :model="obj" :options="sex"></form-field>
    <form-field label="爱好" type="checkboxes" name="likes" :model="obj" :options="likes">
        <template #likes>
            <br>
        </template>
    </form-field>
    <form-field label="来自" type="select" name="from" :model="obj" :options="from"></form-field>
  </div>
</template>

<script>
import FormField from './components/form-field.vue'
export default {
  components: {
    FormField
  },
  data () {
    return {
      // 数据绑定
      obj: {
        name: '',
        password: '',
        sex: 0,
        likes: [],
        from: 'bj'
      },
      // 性别
      sex: {
        0: '男',
        1: '女'
      },
      // 爱好
      likes: {
        cy: '抽烟',
        hj: '喝酒',
        tt: '烫头'
      },
      // 来自
      from: {
        bj: '北京',
        tj: '天津',
        nj: '南京'
      }
    }
  }
}
</script>

<style>
</style>